<script setup>
import { ref } from 'vue'

// 音频设置
const audioSettings = ref({
  masterVolume: 80,
  bgmVolume: 60,
  effectVolume: 70,
  voiceVolume: 50,
  audioQuality: 'high',
  audioMode: 'stereo'
})

// 语音设置
const voiceSettings = ref({
  wakeupWord: '小音箱',
  voiceGender: 'female',
  responseSpeed: 1,
  autoWakeup: true,
  noiseReduction: true
})

// 显示设置
const displaySettings = ref({
  theme: 'dark',
  language: 'zh',
  brightness: 80,
  animation: true,
  clockDisplay: true
})

// 通知设置
const notificationSettings = ref({
  enableNotification: true,
  soundAlert: true,
  vibration: true,
  doNotDisturb: false,
  disturbTime: ['22:00', '08:00']
})

// 更新音频设置
const updateAudioSetting = (key, value) => {
  audioSettings.value[key] = value
  // 实现设置更新逻辑
}

// 更新语音设置
const updateVoiceSetting = (key, value) => {
  voiceSettings.value[key] = value
  // 实现设置更新逻辑
}

// 更新显示设置
const updateDisplaySetting = (key, value) => {
  displaySettings.value[key] = value
  // 实现设置更新逻辑
}

// 更新通知设置
const updateNotificationSetting = (key, value) => {
  notificationSettings.value[key] = value
  // 实现设置更新逻辑
}

// 重置设置
const resetSettings = () => {
  if (confirm('确定要恢复默认设置吗？')) {
    // 实现重置逻辑
  }
}
</script>

<template>
  <div class="settings-page">
    <!-- 音频设置 -->
    <div class="settings-section">
      <h2>音频设置</h2>
      <div class="settings-grid">
        <div class="setting-item">
          <label>主音量</label>
          <div class="volume-control">
            <input
              v-model="audioSettings.masterVolume"
              type="range"
              min="0"
              max="100"
              class="slider"
              @input="updateAudioSetting('masterVolume', $event.target.value)"
            >
            <span class="value-label">{{ audioSettings.masterVolume }}%</span>
          </div>
        </div>
        <div class="setting-item">
          <label>背景音乐</label>
          <div class="volume-control">
            <input
              v-model="audioSettings.bgmVolume"
              type="range"
              min="0"
              max="100"
              class="slider"
              @input="updateAudioSetting('bgmVolume', $event.target.value)"
            >
            <span class="value-label">{{ audioSettings.bgmVolume }}%</span>
          </div>
        </div>
        <div class="setting-item">
          <label>音效音量</label>
          <div class="volume-control">
            <input
              v-model="audioSettings.effectVolume"
              type="range"
              min="0"
              max="100"
              class="slider"
              @input="updateAudioSetting('effectVolume', $event.target.value)"
            >
            <span class="value-label">{{ audioSettings.effectVolume }}%</span>
          </div>
        </div>
        <div class="setting-item">
          <label>语音音量</label>
          <div class="volume-control">
            <input
              v-model="audioSettings.voiceVolume"
              type="range"
              min="0"
              max="100"
              class="slider"
              @input="updateAudioSetting('voiceVolume', $event.target.value)"
            >
            <span class="value-label">{{ audioSettings.voiceVolume }}%</span>
          </div>
        </div>
        <div class="setting-item">
          <label>音质设置</label>
          <select
            v-model="audioSettings.audioQuality"
            @change="updateAudioSetting('audioQuality', $event.target.value)"
          >
            <option value="low">标准音质</option>
            <option value="high">高品质</option>
            <option value="hifi">Hi-Fi</option>
          </select>
        </div>
        <div class="setting-item">
          <label>声道模式</label>
          <select
            v-model="audioSettings.audioMode"
            @change="updateAudioSetting('audioMode', $event.target.value)"
          >
            <option value="mono">单声道</option>
            <option value="stereo">立体声</option>
            <option value="surround">环绕声</option>
          </select>
        </div>
      </div>
    </div>

    <!-- 语音设置 -->
    <div class="settings-section">
      <h2>语音设置</h2>
      <div class="settings-grid">
        <div class="setting-item">
          <label>唤醒词</label>
          <input
            v-model="voiceSettings.wakeupWord"
            type="text"
            @input="updateVoiceSetting('wakeupWord', $event.target.value)"
          >
        </div>
        <div class="setting-item">
          <label>语音性别</label>
          <select
            v-model="voiceSettings.voiceGender"
            @change="updateVoiceSetting('voiceGender', $event.target.value)"
          >
            <option value="female">女声</option>
            <option value="male">男声</option>
          </select>
        </div>
        <div class="setting-item">
          <label>语速调节</label>
          <select
            v-model="voiceSettings.responseSpeed"
            @change="updateVoiceSetting('responseSpeed', $event.target.value)"
          >
            <option :value="0.8">较慢</option>
            <option :value="1">正常</option>
            <option :value="1.2">较快</option>
          </select>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>自动唤醒</span>
            <label class="switch">
              <input
                v-model="voiceSettings.autoWakeup"
                type="checkbox"
                @change="updateVoiceSetting('autoWakeup', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>降噪处理</span>
            <label class="switch">
              <input
                v-model="voiceSettings.noiseReduction"
                type="checkbox"
                @change="updateVoiceSetting('noiseReduction', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
      </div>
    </div>

    <!-- 显示设置 -->
    <div class="settings-section">
      <h2>显示设置</h2>
      <div class="settings-grid">
        <div class="setting-item">
          <label>主题设置</label>
          <select
            v-model="displaySettings.theme"
            @change="updateDisplaySetting('theme', $event.target.value)"
          >
            <option value="light">浅色</option>
            <option value="dark">深色</option>
            <option value="auto">跟随系统</option>
          </select>
        </div>
        <div class="setting-item">
          <label>语言</label>
          <select
            v-model="displaySettings.language"
            @change="updateDisplaySetting('language', $event.target.value)"
          >
            <option value="zh">简体中文</option>
            <option value="en">English</option>
            <option value="ja">日本語</option>
          </select>
        </div>
        <div class="setting-item">
          <label>屏幕亮度</label>
          <div class="volume-control">
            <input
              v-model="displaySettings.brightness"
              type="range"
              min="0"
              max="100"
              class="slider"
              @input="updateDisplaySetting('brightness', $event.target.value)"
            >
            <span class="value-label">{{ displaySettings.brightness }}%</span>
          </div>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>动画效果</span>
            <label class="switch">
              <input
                v-model="displaySettings.animation"
                type="checkbox"
                @change="updateDisplaySetting('animation', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>时钟显示</span>
            <label class="switch">
              <input
                v-model="displaySettings.clockDisplay"
                type="checkbox"
                @change="updateDisplaySetting('clockDisplay', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
      </div>
    </div>

    <!-- 通知设置 -->
    <div class="settings-section">
      <h2>通知设置</h2>
      <div class="settings-grid">
        <div class="setting-item">
          <label class="switch-label">
            <span>启用通知</span>
            <label class="switch">
              <input
                v-model="notificationSettings.enableNotification"
                type="checkbox"
                @change="updateNotificationSetting('enableNotification', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>声音提醒</span>
            <label class="switch">
              <input
                v-model="notificationSettings.soundAlert"
                type="checkbox"
                @change="updateNotificationSetting('soundAlert', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>振动提醒</span>
            <label class="switch">
              <input
                v-model="notificationSettings.vibration"
                type="checkbox"
                @change="updateNotificationSetting('vibration', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div class="setting-item">
          <label class="switch-label">
            <span>勿扰模式</span>
            <label class="switch">
              <input
                v-model="notificationSettings.doNotDisturb"
                type="checkbox"
                @change="updateNotificationSetting('doNotDisturb', $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </label>
        </div>
        <div 
          v-if="notificationSettings.doNotDisturb"
          class="setting-item full-width"
        >
          <label>勿扰时段</label>
          <div class="time-range">
            <input
              v-model="notificationSettings.disturbTime[0]"
              type="time"
              @change="updateNotificationSetting('disturbTime', notificationSettings.disturbTime)"
            >
            <span>至</span>
            <input
              v-model="notificationSettings.disturbTime[1]"
              type="time"
              @change="updateNotificationSetting('disturbTime', notificationSettings.disturbTime)"
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 重置按钮 -->
    <button 
      class="reset-btn"
      @click="resetSettings"
    >
      恢复默认设置
    </button>
  </div>
</template>

<style scoped>
.settings-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 设置区块样式 */
.settings-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.settings-section h2 {
  margin: 0;
  margin-bottom: 2rem;
  color: var(--text-gray);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.setting-item.full-width {
  grid-column: 1 / -1;
}

/* 控件样式 */
input[type="text"],
input[type="time"],
select {
  padding: 0.8rem;
  background-color: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-light);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.value-label {
  min-width: 48px;
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 开关样式 */
.switch-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s;
}

.switch .slider.round {
  border-radius: 24px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: var(--primary-color);
}

.switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* 时间范围样式 */
.time-range {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 重置按钮样式 */
.reset-btn {
  align-self: center;
  padding: 1rem 2rem;
  background: none;
  border: 1px solid var(--error-color);
  color: var(--error-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background-color: var(--error-color);
  color: white;
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .time-range {
    flex-direction: column;
    gap: 0.5rem;
  }

  .time-range input {
    width: 100%;
  }
}
</style>